<template>
  <a-card>
    <a-modal
      title="挂号处理"
      :width="800"
      :visible="modalMisible"
      :plain="true"
      @ok="submitOk"
      @cancel="modalMisible=false"
    >
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="号源医院" :required="true" hasFeedback>
          <input type="radio" name="status" value="2" @change="chooseStatus('success')" v-model="record.status"> 成功
          <input type="radio" name="status" value="3" @change="chooseStatus('fail')" v-model="record.status" style="margin-left:30px"> 失败
        </a-form-item>
<!--        <a-form-item v-show="successCont" :labelCol="labelCol" :wrapperCol="wrapperCol" label="短信内容" :required="true" hasFeedback>-->
<!--          尊敬的用户：<b>{{record.patientName}}</b>，您好！您已成功预约 <b>{{record.hospitalName}}</b>（医院）<b>{{record.departmentName}}</b>（科室）<b>{{record.doctorName}}</b>（医生）<b>{{record.title}}</b>（职位）<b>{{record.visitTime}}</b>（日期）<b>{{record.visitPart}}</b>号，就诊序号为：<b>{{record.visitNum}}</b>。请携带社保卡、身份证至医院窗口进行信息核对完成取号。医院地址：<b>{{record.hospitalName}}</b>。联系电话：<b>{{record.hospitalPhone}}</b>。祝您早日康复，详细信息可询问院内工作人员。-->
<!--        </a-form-item>-->
        <a-form-item v-show="failCont" :labelCol="labelCol" :wrapperCol="wrapperCol" label="短信内容" :required="true" hasFeedback>
          尊敬的用户：<b>{{record.patientName}}</b> ，您好！您预约的 <b>{{record.hospitalName}}</b> 医院 <b>{{record.departmentName}}</b>科 <b>{{record.doctorName}}</b>医生 <b>{{record.visitTime}}</b>日期 <b>{{record.visitPart}}</b>号，挂号失败。很抱歉给您带来了不便，稍后我们的工作人员会和您联系确定重新预约或退款事宜。客服电话：
          <input type="text" value="010—81039997" v-model="customPhone" id="phone">
<!--          <a-textarea :rows="5"  placeholder="..." ></a-textarea>-->
        </a-form-item>
        <a-form-item v-show="failCont" :labelCol="labelCol" :wrapperCol="wrapperCol" label="失败原因" :required="true" hasFeedback>
            <a-textarea :rows="5" v-model="failReason" placeholder="失败原因" ></a-textarea>
        </a-form-item>
      </a-form>
    </a-modal>

  </a-card>
</template>

<script>
  import { httpAction, getAction,putAction } from '@api/manage'
  import JDate from '@/components/jeecg/JDate'
  export default {
    name: 'DoctorRegisterRecordModal',
    components: {
      JDate,
    },
    inject: ['reload'],

    data() {
      return {
        successCont:true,
        failCont:false,
        title: '挂号管理',
        modalMisible: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        labelCols: {
          xs: { span: 12 },
          sm: { span: 8 },
        },
        wrapperCols: {
          xs: { span: 12 },
          sm: { span: 10 },
        },
        customPhone:"010—81039997", //客服电话
        failReason:"", //挂号失败原因
        record:{},
        hospitals:{},  //医院信息
        // departments:{},//可是信息
        form: this.$form.createForm(this),
        validatorRules: {
          share: {
            rules: [
              { required: true, message: '请输入数字值' },
            ]
          },
        },

        url: {
          examine: "/doctorRegisterRecord/doctorRegisterRecord/examine",
          getOne: "/doctorRegisterRecord/doctorRegisterRecord/getOne",
        },
      }
    },
    created() {},
    methods: {
      viewShow(record) {
        // this.record = record;
        this.modalMisible = true
        var param = {
          recordId : record.id
        }
        getAction(this.url.getOne,param).then((res)=>{
          if(res.code === 200){
            this.record = res.result
            this.record.status = 2 // 默认是成功状态
            //展示成功和失败对应的状态
            if(res.result.status == 2){
              this.successCont = true;
              this.failCont = false;
            }else if(res.result.status == 3){
              this.successCont = false;
              this.failCont = true;
            }
          }else{
            this.$message.warning(res.message)
          }
        }).catch((error)=>{
          console.log(error);
        })
      },
      //监听单选按钮
      chooseStatus(status){
        console.log("状态：",status)
        if(status == 'success'){
          this.successCont = true
          this.failCont    = false
        }else{
          this.successCont = false
          this.failCont    = true
        }
      },
      submitOk () {
        console.log(this.record)
        if(this.record.status == 3){ //挂号失败
          this.record.hospitalPhone = this.customPhone  // 更改联系方式
          if(this.failReason.length < 200){
            this.record.failReason = this.failReason    // 挂号失败原因
          }else{
            this.$message.warning("失败原因过长，长度不可超过200")
            return false
          }
        }
        httpAction(this.url.examine, this.record,'post').then((res)=>{
          if(res.code === 200){
            this.$message.success(res.message)
          }else{
            this.$message.warning(res.message)
          }
          this.reload()
        }).catch((error)=>{
          console.log(error);
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .ant-input-number {
    margin-right: 20px;
    width: 360px;
  }
  #phone{
    border: 1px solid gainsboro;
    height: 35px;
    border-radius: 5px;
    padding: 0 10px;
    outline: #c6c6ea;
  }
</style>